<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <script type="text/javascript" th:src="@{/static/layui/layui.all.js}"></script>

    <script th:src="@{/static/layui/jquery.min.js}"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div >
    <fieldset class="table-search-fieldset">
        <legend>搜索信息</legend>
        <div style="margin: 10px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">客户姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="uname" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                    </div>
                </div>
            </form>
        </div>
    </fieldset>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <!--                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>-->
            <!--                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
            <!--                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
            <button class="layui-btn layui-btn-sm" lay-event="insert">添加数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="deleteSelect">删除选中行数据</button>

            <!--                <div> 用户名 :</div>-->
            <!--                <div th:if="${session.user}" ><span th:text="${session.user.realName}"/></div>-->
        </div>
    </script>

    <table class="layui-hide" id="test" lay-filter="test" ></table>

    <script type="text/html" id="barDemo">
        <!--            <a class="layui-btn layui-btn-xs" lay-event="detail">修改密码</a>-->
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    </script>


</div>

<!--<script src="layui/layui.all.js" charset="utf-8"></script>-->
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script th:inline=none>
    // th:inline=none解决layui表格中的[[与jquery.js

    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
        table.render({
            elem: '#test'
            ,url:'http://127.0.0.1:8080/images/findByPage'
            ,toolbar: '#toolbarDemo'//开启头部工具栏，并为其绑定左侧模板
            ,title: '用户数据表'
            ,totalRow: true
            ,cellMinWidth: 200 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,id:"id"  //表格的id
            // ,limits: [5,10, 20,50]
            // ,limit: 10 //每页默认显示的数量
            // ,height: $(document).height() - $('#potentialcustomerDataGrid').offset().top - 20 //分页栏一直显示在最下方
            ,cols: [[
                {type: 'checkbox', fixed: 'left',align:'center'}
                ,{field:'uname', title:'姓名', minWidth:'100'}
                // ,{field:'custId', title:'ID', width:'10%', fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                ,{field:'pname', title:'照片名字', minWidth:'100'}
                ,{ title:'照片',field:'path', minWidth:'100',templet: function (d) {
                        return '<img onclick="showimg(this)" id="driimg" style="display: inline-block; width: 50px; height: 50px;" src="' + d.path + '">'}}  //方法二
                // return '<div><img src="'+d.path+'" alt="" width="50px" height="50px" ></a></div>';}} //方法一
                // field:'pname',
            ]]
            ,page: true
            ,limit: 10
        });

        //方法二
        window.showimg = function (t) {
            //页面层
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: '516px',
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: '<img style="display: inline-block; width: 100%; height: 100%;" src="' + t.src + '">'
            });
        }


        //页面层-图片
        // 方法一图片显示不全
        // table.on('rowDouble(test)', function (obj) {
        //     layer.open({
        //         type: 2,
        //         title: false,
        //         closeBtn: 1,
        //         area: ['100%', '100%'],
        //         skin: 'layui-layer-nobg', //没有背景色
        //         shadeClose: true,
        //         content: [obj.data.path, 'no']
        //     });
        //
        // });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            console.log(result);
            var index=layer.msg('查询中，请稍后...',{icon:16,time:false,shade:0});
            // layer.alert(result, {
            //     title: '最终的搜索信息'
            // });
            table.reload('custId',{
                url: 'dfq/selectByTj'
                ,method: 'post'
                ,where: {
                    'custName':data.field.custName,
                    'custPhone':data.field.custPhone,
                    'custIndustry':data.field.custIndustry
                }
                ,contentType: 'application/json'
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            })
            layer.close(index);
            return false;

        });

        //工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选')
                    break;
                case 'insert':
                    layer.open({
                        title: '添加用户',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: 'add.html',
                    });
                    // $(window).on("resize", function () {
                    //     layer.full(index);
                    // });
                    break;
                case 'deleteSelect':
                    var data = checkStatus.data;
                    var custId = "";
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            custId += data[i].id + ",";
                        }
                        console.log(custId);
                        layer.confirm('确定删除选中的数据？', {icon: 3, title: '提示信息'}, function (index) {
                            $.post('http://127.0.0.1:8080/images/deleteSelect', {"custId": custId}, function (data) {
                                layer.msg("删除成功", {icon: 6});
                                layer.close(index);
                                window.parent.location.reload();//修改成功后刷新父界面
                                table.reload();
                            });
                        })
                    } else {
                        layer.msg('请选择需要删除的数据', {icon: 5});
                    }
                    break;
            }
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                var d = {"custId": data.custId};
                var datas = JSON.stringify(d);

                layer.confirm('真的删除行么',{icon:3, title:'提示信息'}, function (index) {
                    $.ajax({
                        url: "/dfq/deleteById",
                        type: 'post',
                        data: datas,
                        contentType: "application/json;charset=utf-8",
                        dataType: 'json',
                        async: false,//false为同步，这个Ajax请求将整个浏览器锁死
                        success: function (data) {
                            if (data.msg == 1) {
                                //删除这一行
                                obj.del();
                                //关闭弹框
                                layer.close(index);
                                layer.msg("删除成功", {icon: 6});
                            } else {
                                layer.msg("删除失败", {icon: 5});
                            }
                        }
                    });
                    return false;
                });
            } else if(obj.event === 'edit'){
                var index = layer.open({
                    title: '修改用户',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'edit.html',
                    success: function (layero, index) {
                        //找到它的子窗口的body
                        let body = layer.getChildFrame('body', index);
                        // var body = layer.getChildFrame('body', table);  //巧妙的地方在这里哦
                        // //为子窗口元素赋值
                        body.contents().find("#custId").val(data.custId);
                        body.contents().find("#custName").val(data.custName);
                        body.contents().find("#custSource").val(data.custSource);
                        body.contents().find("#custPhone").val(data.custPhone);
                        body.contents().find("#custAddress").val(data.custAddress);
                        body.contents().find("#custLevel").val(data.custLevel);
                        body.contents().find("#custIndustry").val(data.custIndustry);
                    }
                });
                // $(window).on("resize", function () {
                //     layer.full(table);
                // });
                return false;
            }else if (obj.event == 'detail'){
                //弹出框
                layer.open({
                    id:1,
                    type: 1,//可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    title:'修改密码',
                    skin:'layui-layer-rim',
                    area:['450px', 'auto'],

                    content: ' <div class="row" style="width: 420px;  margin-left:7px; margin-top:10px;">'
                        +'<div class="col-sm-12">'
                        +'<div class="input-group">'
                        +'<span class="input-group-addon"> 新 密 码   :</span>'
                        +'<input id="firstpwd" type="password" class="form-control" placeholder="请输入密码">'
                        +'</div>'
                        +'</div>'
                        +'<div class="col-sm-12" style="margin-top: 10px">'
                        +'<div class="input-group">'
                        +'<span class="input-group-addon">确认密码:</span>'
                        +'<input id="secondpwd" type="password" class="form-control" placeholder="请再输入一次密码">'
                        +'</div>'
                        +'</div>'
                        +'</div>'
                    ,
                    btn:['保存','取消'],
                    btn1: function (index,layero) {
                    },
                    btn2:function (index,layero) {
                        layer.close(index);
                    }

                });
            }
        });

    });
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {
                $.ajax({
                    url: 'dfq/update',
                    data: JSON.stringify(data.field),
                    contentType: "application/json;charset=utf-8",
                    dataType:'json',
                    type: "post",
                    async: false,//false为同步，这个Ajax请求将整个浏览器锁死
                    success:function (d){
                        if (d.msg==1){
                            alert("添加成功");
                            // window.parent.location.reload();//修改成功后刷新父界面
                        }else {
                            alert(d.msg);
                        }
                    }
                })
                // 关闭弹出层
                layer.close(index);
                var iframeIndex = parent.layer.getFrameIndex(window.name);
                parent.layer.close(iframeIndex);

            });
            return false;
        });

    });
</script>

</body>
</html>